<template>
	<view class="goodsDetail">
		<!-- <swiper indicator-dots>
			<swiper-item v-for="(img,index) in item.swiper" :key="index">
				<image :src="img"></image>
			</swiper-item>
		</swiper> -->
		<view>
			<image :src="item.cover" class="cover"></image>
		</view>
		<view>{{item.price}}</view>
		<view>{{item.title}}</view>
		<view><view class="cartNum" @tap.stop="">
							<u-number-box v-model="item.number" :asyncChange="true" :min="1"
								@change="cartCountChange(index,item.number)" />
						</view></view>
		<view class="content" v-html="item.content"></view>

		<view class="navigation">
			<view class="left">
				<navigator open-type="navigate" url="/pages/chat/chat" class="item">
					<u-icon name="server-fill" :size="30" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">客服</view>
				</navigator>
				<navigator open-type="switchTab" url="/pages/index/index" class="item">
					<u-icon name="home" :size="30" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">首页</view>
				</navigator>
				<navigator open-type="switchTab" url="/pages/cart/cart" class="item car">
					<u-badge class="car-num" :count="9" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="30" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">购物车</view>
				</navigator>
			</view>
			<view class="right">
				<view class="cart btn u-line-1">加入购物车</view>
				<view class="buy btn u-line-1" @click="addCart(1)">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsDetail
	} from "@/api/api.js"
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				id: 0,
				item: []
			}
		},
		computed: {
			...mapState(['shopList']),
		},
		methods: {
			...mapMutations(['addToCart']),
			async getData() {
				var data = {
					id: this.id,
				}
				await getGoodsDetail(data).then((res) => {
					this.item = res
				}).catch(() => {

				})
			},

			// 添加购物车
			addCart(num) {
				let product = {
					id: this.id,
					num
				};
				this.addToCart(product);
				uni.showToast({
					title: '添加成功'
				});
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			}
		},
		onLoad(options) {
			this.id = parseInt(options.id)
			this.getData()
		}
	}
</script>

<style lang="scss">
	.goodsDetail {
		swiper {
			height: 700rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
		.cover{
			width: 100%;
		}

		.content {}

		.navigation {
			position: fixed;
			bottom: 0;
			width: 100%;
			display: flex;
			margin-top: 100rpx;
			border: solid 2rpx #f2f2f2;
			background-color: #ffffff;
			padding: 16rpx 0;
			justify-content: center;
			text-align: center;

			.left {
				display: flex;
				font-size: 20rpx;

				.item {
					margin: 0 20rpx;

					&.car {
						text-align: center;
						position: relative;

						.car-num {
							position: absolute;
							top: -10rpx;
							right: -10rpx;
						}
					}
				}
			}

			.right {
				display: flex;
				font-size: 28rpx;
				align-items: center;

				.btn {
					line-height: 66rpx;
					padding: 0 30rpx;
					border-radius: 36rpx;
					color: #ffffff;
				}

				.cart {
					background-color: #ed3f14;
					margin-right: 30rpx;
				}

				.buy {
					background-color: #ff7900;
				}
			}
		}


	}
</style>